<template>
  <view class="slefService">
    <!-- 搜索 -->
    <view class="search">
      <u-search
        bg-color="#fff"
        placeholder="输入问题关键词~"
        v-model="keyWord"
        @search="handleSearch"
        :show-action="false"
      ></u-search>
    </view>
    <!-- 问题专区 -->
    <view class="issueArea">
      <view class="topArea">
        <!-- <u-cell-item
          title="猜您想问"
          value="全部活动"
          :arrow="true"
          arrow-direction="right"
          :border="false"
          @click="goUrlFn(`/packageA/pages/selfService/gridList`)"
        ></u-cell-item> -->
        <u-cell-item
          icon="integral-fill"
          title="猜您想问"
          value="全部问题"
          @click="
            goUrlFn(
              `/packageA/pages/selfService/selfServiceList?integralsRuleId=${modelType}`
            )
          "
        ></u-cell-item>
      </view>
      <view class="bottomArea">
        <u-grid :col="4" :border="false">
          <u-grid-item
            v-for="(item, index) in gridItem"
            :key="item.id"
            @click="gotoList(item)"
          >
            <!-- <u-icon name="photo" :size="46"></u-icon> -->
            <image :src="getImgFullPath(item.icon)" class="badge-icon"></image>
            <view class="grid-text">{{ item.name }}</view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    <!-- 猜你想问 -->
    <view class="question">
      <view
        class="questionBtn"
        @click="goUrlFn(`/packageA/pages/leaveMessage/index`)"
      >
        <u-icon name="edit-pen"></u-icon>问题留言
      </view>
      <!-- <u-cell-item
        icon="integral-fill"
        title="猜您想问"
        value="全部问题"
      ></u-cell-item>
      <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item> -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, reactive, ref } from 'vue'
import {
  onReady,
  onShow,
  onLoad,
  onReachBottom,
  onPageScroll,
  onShareAppMessage,
  onPullDownRefresh
} from '@dcloudio/uni-app'
//API
import { baseApi } from '@/api'
//工具
import { getImgFullPath } from '@/utils'
import { useUserStore, useConfigStore } from '@/store'
// 初始数据
const userStore = useUserStore()
const keyWord = ref('')
const formData = ref({})
const modelType = ref<any>()
const gridItem = ref()
// 获取枚举列表
const enumList = async () => {
  // console.log(modelType.value, 'modelType.value')

  const { data } = await baseApi.getBASE_DictEnum({
    parentValue: 'sys_question_dict',
    noPaging: true,
    integralsRuleId: modelType.value
  })
  // console.log(data, 'data枚举')
  if (data && data.length > 0) {
    gridItem.value = data
    // gridItem.value = data.filter((o: any, index: any) => {
    //   if (index < 4) {
    //     return o
    //   }
    // })
  } else {
    gridItem.value = []
  }
}

//页面跳转
const goUrlFn = (url: any) => {
  if (url) {
    uni.navigateTo({
      url
    })
  }
}

// 跳转到列表
const gotoList = (item: any) => {
  //tyep:是问题类型
  goUrlFn(`/packageA/pages/selfService/selfServiceList?type=${item.value}`)
}

// 搜索函数
const handleSearch = () => {
  // console.log('搜索', modelType.value)

  goUrlFn(
    //integralsRuleId是app模式类型
    `/packageA/pages/selfService/selfServiceList?integralsRuleId=${modelType.value}&keyWord=${keyWord.value}`
  )
}

onLoad((option: any) => {
  // console.log('opo', option)
  modelType.value = option.mode
  uni.setStorageSync('selfServiceModelType', modelType.value)
  enumList()
})
</script>

<style lang="scss" scoped>
.slefService {
  padding: 20rpx;

  .issueArea {
    height: 80vh;
    margin: 20rpx 0;
    background-color: #fff;
  }
  .question {
    background-color: #fff;
    .questionBtn {
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      font-size: 32rpx;
      color: #409eff;
    }
  }
}

.badge-icon {
  width: 80rpx;
  height: 80rpx;
}
</style>
